<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学生信息列表</title>
    <link rel="stylesheet" href="static/styles.css">
</head>
<body>
    <div>
        <h1>学生信息列表</h1>
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>院系</th>
                    <th>班级</th>
                    <th>地址</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for student in students %}
                <tr>
                    <td>{{ student.Sno }}</td>
                    <td>{{ student.Sname }}</td>
                    <td>{{ student.Ssex }}</td>
                    <td>{{ student.Sage }}</td>
                    <td>{{ student.Dno }}</td>
                    <td>{{ student.Sclass }}</td>
                    <td>{{ student.address }}</td>
                    <td>
                        <button onclick="openEditModal('{{ student.Sno }}', '{{ student.Sname }}', '{{ student.Ssex }}', '{{ student.Sage }}', '{{ student.Dno }}', '{{ student.Sclass }}', '{{ student.address }}')">修改</button>
                        <form action="{{ url_for('delete_student', sno=student.Sno) }}" method="post" >
                            <button type="submit">删除</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <!-- 添加学生按钮 -->
        <button onclick="openAddModal()">添加学生</button>

        <!-- 添加学生模态框 -->
        <div id="addModal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeAddModal()">&times;</span>
                <h2>添加学生信息</h2>
                <form method="post" action="{{ url_for('add_student') }}">
                    <label for="Sno">学号:</label>
                    <input type="text" name="Sno" required><br>
                    <label for="Sname">姓名:</label>
                    <input type="text" name="Sname" required><br>
                    <label for="Ssex">性别:</label>
                    <input type="text" name="Ssex" required><br>
                    <label for="Sage">年龄:</label>
                    <input type="number" name="Sage" required><br>
                    <label for="Dno">院系:</label>
                    <input type="text" name="Dno" required><br>
                    <label for="Sclass">班级:</label>
                    <input type="text" name="Sclass"><br>
                    <label for="address">地址:</label>
                    <input type="text" name="address"><br>
                    <button type="submit">保存</button>
                </form>
            </div>
        </div>

        <!-- 修改学生模态框 -->
        <div id="editModal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeEditModal()">&times;</span>
                <h2>修改学生信息</h2>
                <form id="editForm" method="post" action="{{ url_for('edit_student', sno='SNO_PLACEHOLDER') }}">
                    <input type="hidden" name="Sno" id="editSno">
                    <label for="Sname">姓名:</label>
                    <input type="text" name="Sname" id="editSname" required><br>
                    <label for="Ssex">性别:</label>
                    <input type="text" name="Ssex" id="editSsex" required><br>
                    <label for="Sage">年龄:</label>
                    <input type="number" name="Sage" id="editSage" required><br>
                    <label for="Dno">院系:</label>
                    <input type="text" name="Dno" id="editDno" required><br>
                    <label for="Sclass">班级:</label>
                    <input type="text" name="Sclass" id="editSclass"><br>
                    <label for="address">地址:</label>
                    <input type="text" name="address" id="editAddress"><br>
                    <button type="submit">保存</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        // 打开添加学生模态框
        function openAddModal() {
            document.getElementById("addModal").style.display = "block";
        }

        // 关闭添加学生模态框
        function closeAddModal() {
            document.getElementById("addModal").style.display = "none";
        }

        // 打开修改学生模态框
        function openEditModal(sno, name, sex, age, dno, sclass, address) {
            document.getElementById("editSno").value = sno;
            document.getElementById("editSname").value = name;
            document.getElementById("editSsex").value = sex;
            document.getElementById("editSage").value = age;
            document.getElementById("editDno").value = dno;
            document.getElementById("editSclass").value = sclass;
            document.getElementById("editAddress").value = address;
            document.getElementById("editModal").style.display = "block";



            // 设置表单的 action 属性
        var editForm = document.getElementById("editForm");
        editForm.action = "/edit_student/" + sno; // 直接使用学号构建 URL
        document.getElementById("editModal").style.display = "block";
        }

        // 关闭修改学生模态框
        function closeEditModal() {
            document.getElementById("editModal").style.display = "none";
        }

        // 点击模态框外部关闭模态框,我的理解：点击遮盖物（即模态框）则会关闭这个模态框
        window.onclick = function(event) {
            if (event.target == document.getElementById("addModal")) {
                closeAddModal();
            }
            if (event.target == document.getElementById("editModal")) {
                closeEditModal();
            }
        }
    </script>
</body>
</html>